import { useHistory } from 'react-router-dom'
import { NavBar } from 'antd-mobile'

import styles from './index.module.scss'
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { getSearch } from '@/store/actions/search'
import { RootState } from '@/types/store'
import ArticleItem from '@/pages/Home/components/ArticleItem'

const Result = () => {
  const history = useHistory()
  const params = new URLSearchParams(location.search)
  const key = params.get('key')
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getSearch(key!))
  }, [])
  const results = useSelector((state:RootState) => state.search.getSearch.results)
  return (
    <div className={styles.root}>
      <NavBar onBack={() => history.go(-1)}>搜索结果</NavBar>
      <div className="article-list">
      {results.map((item, ind) => {
        return <div key={ind} className="article-item" onClick={() => history.push(`/article/${item.art_id}`)}>
          <ArticleItem item={item} />
        </div>
      })}
      </div>
    </div>
  )
}

export default Result
